<template>
  <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="160px">
    <el-row>
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="queryParams.title" clearable></el-input>
      </el-form-item>
      <el-form-item label="标签" prop="label">
        <el-input v-model="queryParams.label" clearable></el-input>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="作者" prop="author">
        <el-input v-model="queryParams.author" clearable></el-input>
      </el-form-item>
      <el-form-item label="关键词" prop="keyword">
        <el-input v-model="queryParams.keyword" clearable></el-input>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="发表年份" prop="startYear">
        <el-input v-model="queryParams.startYear" v-inputNumber="0" clearable style="width: 82px"></el-input>
        <span style="padding: 0 10px;color: var(--el-border-color);">——</span>
        <el-input v-model="queryParams.endYear" v-inputNumber="0" clearable style="width: 82px"></el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-row>
  </el-form>

  <el-divider></el-divider>

  <el-row :gutter="10" class="mb8" style="float:left">
    <template v-if="type != '0'">
      <el-col :span="1.5">
        <el-button type="primary" icon="Plus" @click="handleAdd">添加</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="Delete" @click="handleDelete">批量删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="Edit" @click="handleEdit">自定义标签</el-button>
      </el-col>
    </template>
    <el-col :span="1.5">
      <el-button type="primary" icon="Download" @click="handleDownload">批量下载</el-button>
    </el-col>
  </el-row>

  <el-table v-loading="loading" :data="dataList" @selection-change="selectChange" stripe>
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="文章标题" align="center" prop="title" />
    <el-table-column label="作者" align="center" prop="author" />
    <el-table-column label="标签" align="center" prop="label" />
    <el-table-column label="发表年份" align="center" prop="yearOfPublication" />
    <el-table-column label="关键词" align="center" prop="keyword" />
    <el-table-column label="操作人" align="center" prop="operator" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="{ row }">
        <el-button type="text" @click="viewItem(row.id)">查看</el-button>
        <el-button type="text" @click="deleteItem(row.id)" v-if="type != '0'">删除</el-button>
        <el-button type="text" @click="downloadItem(row.fileid)" v-if="row.fileid">下载</el-button>
      </template>
    </el-table-column>
  </el-table>

  <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryParams.page"
    v-model:limit="queryParams.rows" @pagination="getList" />

  <DetailForm v-model:open="detailFormOpen" v-model:id="detailFormId" :type="type" @updateList="getList"/>
  <LabelManage v-model:open="labelOpen" :role="role"/>
</template>
<script setup>
import { getAll, deleteList } from '@/api/knowledgeManage'
import DetailForm from './detailForm.vue'
import LabelManage from './labelManage.vue'
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  // type: 0代表个人知识库
  type: {
    type: String,
    default: '1'
  }
})
const { proxy } = getCurrentInstance()
const queryData = reactive({
  queryParams: {
    page: 1,
    rows: 10,
  },
  total: 0,
  loading: false,
  dataList: []
})
const { queryParams, total, loading, dataList } = toRefs(queryData)
const detailFormOpen = ref(false)
const labelOpen = ref(false)
const detailFormId = ref('')
const onlyOneSelf = props.type != '1' ? '1' : '0'
const role = props.type == '2' ? '0' : '1'

const getList = () => {
  getAll({ ...queryParams.value, onlyOneSelf }).then(res => {
    dataList.value = res.data.rows
    total.value = res.data.total
  })
}
const resetQuery = () => {
  queryParams.value.page = 1
  queryParams.value.endYear = ''
  proxy.resetForm('queryRef')
  getList()
}
const ids = ref([])
const fieldIds = ref([])
const selectChange = (selection) => {
  ids.value = selection.map(item => item.id)
  fieldIds.value = selection.filter(item => item.fileid).map(item => item.fileid)
}
const handleAdd = () => {
  detailFormOpen.value = true
}
const handleDelete = () => {
  if (ids.value.length == 0) {
    proxy.$modal.msgWarning('请至少选择一条数据！')
    return
  }
  ElMessageBox.confirm('是否确定删除？', "系统提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: "warning",
    cancelButtonClass: 'is-plain'
  }).then(() => {
    return deleteList(ids.value)
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功！')
    getList()
  })
}
const handleEdit = () => {
  labelOpen.value = true
}
const handleDownload = () => {
  // if (ids.value.length == 0) {
  if (fieldIds.value.length == 0) {
    proxy.$modal.msgWarning('请至少选择一条数据有附件的数据！')
    return
  }
  proxy.download("/attachment/downForZip/" + fieldIds.value, {}, '知识库.zip')
}
const viewItem = (id) => {
  detailFormOpen.value = true
  detailFormId.value = id
}
const deleteItem = (id) => {
  ElMessageBox.confirm('是否确定删除？', "系统提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: "warning",
    cancelButtonClass: 'is-plain'
  }).then(() => {
    return deleteList(id)
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功！')
    getList()
  })
}
const downloadItem = (id) => {
  location.href = import.meta.env.VITE_APP_BASE_API + '/attachment/downLoadFile?attachId=' + id
}
onMounted(() => {
  getList()
  // proxy.$Bus.on('update-query-list', () => {
  //   getList()
  // })
})
// onBeforeUnmount(() => {
//   proxy.$Bus.off('update-query-list') 
//   proxy.$Bus.all.delete('update-query-list') 
// })

</script>
<style scoped></style>